<template>
  <div class="xtx-new">
    <div class="container">
      <Panel title="新鲜好物" sub-title="新鲜出炉 品质靠谱">
        <template #head-right>
          <More path="/" />
        </template>
        <template #panel-content>
          <div ref="target" style="position: relative; height: 406px">
            <transition name="fade">
              <ul class="xtx-new-goodslist" v-if="result?.length">
                <li class="xtx-new-goodslist__item" v-for="goods in result" :key="goods.id">
                  <router-link to="/">
                    <img :src="goods.picture" alt="" />
                    <p class="name">{{ goods.name }}</p>
                    <p class="price">&yen;{{ goods.price }}</p>
                  </router-link>
                </li>
              </ul>
              <!-- 骨架屏 -->
              <ListSkeleton v-else />
            </transition>
          </div>
        </template>
      </Panel>
    </div>
  </div>
</template>

<script setup lang="ts">
import Panel from './Panel.vue'
import More from '@/components/More.vue'
import ListSkeleton from './ListSkeleton.vue'
import { newGoodsListAPI } from '@/api/home'
import { useLazyData } from '@/hooks/useLazyData'
import { type NewGoods } from '@/api/home/types.d'
defineOptions({
  name: 'New'
})

/** 懒加载获取数据 */
const { target, result } = useLazyData<NewGoods>(newGoodsListAPI)
</script>

<style lang="scss" scoped>
.xtx-new {
  &-goodslist {
    display: flex;
    justify-content: space-between;

    &__item {
      width: 306px;
      height: 406px;
      background-color: #f0f9f4;

      img {
        width: 306px;
        height: 306px;
      }

      p {
        padding: 12px 30px 0;
        font-size: 22px;
        text-align: center;
      }

      .name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .price {
        color: $xtx-color;
      }
    }
  }
}
</style>
